<template>
  <div class="out">
    <el-form :model="detail" label-width="120px">
      <el-form-item label="题目名称">
        <el-input v-model="detail.name" style="width: 500px;"/>
      </el-form-item>
      <el-form-item label="题目分数">
        <el-input type="number" v-model="detail.point" style="width: 100px"/>
      </el-form-item>
      <el-form-item label="题目难度">
        <el-select v-model="detail.level" placeholder="请选择等级">
          <el-option label="简单" :value="1" />
          <el-option label="中等" :value="2" />
          <el-option label="困难" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="题目标签">
        <el-select v-model="detail.tags" multiple placeholder="标签筛选">
          <el-option
            v-for="item in allTags"
            :key="item.v"
            :label="item.name"
            :value="item.v"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间限制">
        <el-input type="number" v-model="detail.timeLimit" style="width: 200px"/>
      </el-form-item>
      <el-form-item label="空间限制">
        <el-input type="number" v-model="detail.spaceLimit" style="width: 200px"/>
      </el-form-item>
      <el-form-item label="题目描述">
        <el-input v-model="detail.description" type="textarea" autosize />
      </el-form-item>
      <el-form-item label="程序标准输入">
        <el-input v-model="inText" type="textarea" />
      </el-form-item>
      <el-form-item label="程序标准输出">
        <el-input v-model="outText" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {Tag} from "../../../utils/http/tags";
import {Problem} from "../../../utils/http/problem";
import {toRaw} from "@vue/reactivity";

export default {
  name: "AddOrUpdateProblem",
  props:[
    'pid','isEdit'
  ],
  emits:[
    'doCloseModal'
  ],
  data:function (){
    return {
      detail:{
        id:0,
        name: '',
        point:0,
        level:null,
        tags: [],
        description: '',
        timeLimit:0,
        spaceLimit:0
      },
      inText:"",
      outText:"",
      allTags : Tag.getAllTags()
    }
  },
  mounted() {
    if (!this.$props.isEdit){
      return
    }
    this.detail.id = this.$props.pid
    this.loadData()
  },
  methods:{
    async onSubmit(){
      let req = {}
      req.detail = toRaw(this.detail)
      console.log(req)
      req.detail.tags = JSON.stringify(this.detail.tags.map(t=>parseInt(t)))
      req.detail.timeLimit = parseInt(req.detail.timeLimit)
      req.detail.spaceLimit = parseInt(req.detail.spaceLimit)
      req.detail.point = parseInt(req.detail.point)
      req.inText = toRaw(this.inText);
      req.outText = toRaw(this.outText);
      console.log(req)
      let resp = await Problem.addOrUpdate(req)
      if (resp.success){
        this.$success("提交成功")
        this.$emit('doCloseModal')
      }
    },
    async loadData(){
      let resp = await Problem.getById(this.detail.id)
      let ps = resp.data;
      ps.tags = JSON.parse(ps.tags)
      ps.tags = ps.tags.map(t=>t.toString())
      this.detail = ps
      resp = await Problem.getIO(this.detail.id)
      this.inText = resp.data.inText
      this.outText = resp.data.outText
    }
  }
}
</script>

<style scoped>
.out{
  text-align: left;
}
</style>
